<!-- 打印 -->
<template>
  <el-dialog
    custom-class="printDialog"
    append-to-body
    :close-on-click-modal="false"
    title="打印"
    :visible.sync="printDialog.visible"
    v-if="printDialog.visible"
    :fullscreen="false"
    width="80%"
    top="7vh"
    @close="close()"
  >
    <div class="preMaterialList-detailTable">
      <div class="title">基本信息：</div>
      <div><span class="label">备料单号：</span>{{ form1.sheetNo }}</div>
      <div><span class="label">关联领料单号：</span>{{ form1.pickSheetNoList || '-' }}</div>
      <div><span class="label">工单号：</span>{{ form1.workOrderNoList || '-' }}</div>
      <!-- <div><span class="label">关联拆分单号：</span>{{ form1.glcfdh || '-' }}</div> -->
      <!-- <div v-if="false"><span class="label">母备料单号：</span></div> -->
      <div><span class="label">生产订单号：</span>{{ form1.productionOrderNoList || '-' }}</div>
      <!-- <div><span class="label">创建人：</span>{{ form1.createUser }} <span class="label">创建时间：</span>{{ form1.createTime }}</div> -->
      <div class="title">备料明细：</div>
      <avue-crud ref="detailTableCrud" :option="printDialog.option" :table-loading="printDialog.loading" :data="printDialog.data" v-model="printDialog.form"> </avue-crud>
      <!-- <table width="100%;" cellpadding="0" cellspacing="0" border="1" bordercolor="#dfe6ec" style="text-align: center">
        <thead>
          <tr>
            <th>序号</th>
            <th>单据类型</th>
            <th>单据号</th>
            <th>工单号</th>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>单位</th>
            <th>领料数量</th>
            <th>最小包规数量</th>
            <th>应发数量</th>
            <th>推荐仓库</th>
            <th>推荐储位</th>
            <th>推荐批次</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in printDialog.data" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.sheetType }}</td>
            <td>{{ item.sheetNo }}</td>
            <td>{{ item.workOrderNo }}</td>
            <td>{{ item.partNo }}</td>
            <td>{{ item.partName }}</td>
            <td>{{ item.uom }}</td>
            <td>{{ item.originalQtyTotal }}</td>
            <td>{{ item.mpq }}</td>
            <td>{{ item.quantity }}</td>
            <td>{{ item.recommendDataDTO }}</td>
            <td>{{ item.recommendDataDTO }}</td>
            <td>{{ item.recommendDataDTO }}</td>
          </tr>
        </tbody>
      </table> -->
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick type="primary" size="small" @click="submit" icon="el-icon-circle-plus-outline">打 印</el-button>
      <el-button @click="cancel" size="small" icon="el-icon-circle-close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getDetail, getDetailAllList } from '@/api/warehouse/preMaterialList';

export default {
  name: 'printDialog',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      sheetId: null,
      form1: {},
      printDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          height: '400',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '物料编码',
              prop: 'partNo'
            },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '单位',
              prop: 'uom'
            },
            {
              label: '领料数量',
              prop: 'originalQtyTotal'
            },
            {
              label: '最小包规数量',
              prop: 'mpq'
            },
            {
              label: '应发数量',
              prop: 'quantity'
            },
            {
              label: '推荐仓库',
              prop: 'recommendInventoryCode'
            },
            {
              label: '推荐储位',
              prop: 'recommendAreaCode'
            },
            {
              label: '推荐批次',
              prop: 'recommendLotNo'
            }
          ]
        }
      }
    };
  },
  watch: {
    visible: {
      handler(value) {
        this.printDialog.visible = value;
      }
    }
  },
  mounted() {},
  computed: {},
  methods: {
    getData(id) {
      this.sheetId = id;
      getDetail(this.sheetId).then((res) => {
        const data = res.data.data;
        this.form1 = data;
      });
      this.getPageList();
    },
    getPageList() {
      this.printDialog.loading = true;
      // 不分页
      getDetailAllList(this.sheetId).then((res) => {
        const data = res.data.data;
        data.forEach((item) => {
          if (item.sheetRecommendList && item.sheetRecommendList.length > 0) {
            let recommendInventoryCode = item.sheetRecommendList.map((list) => list.recommendDataDTO && list.recommendDataDTO.recommendInventoryCode);
            let recommendAreaCode = item.sheetRecommendList.map((list) => list.recommendDataDTO && list.recommendDataDTO.recommendAreaCode);
            let recommendLotNo = item.sheetRecommendList.map((list) => list.recommendDataDTO && list.recommendDataDTO.recommendLotNo);
            item.recommendInventoryCode = [...new Set(recommendInventoryCode)].join(',');
            item.recommendAreaCode = [...new Set(recommendAreaCode)].join(',');
            // item.recommendLotNo = [...new Set(recommendLotNo)].join(',');
            item.recommendLotNo = recommendLotNo.join(',');
          } else {
            item.recommendInventoryCode = '-';
            item.recommendAreaCode = '-';
            item.recommendLotNo = '-';
          }
        });
        this.printDialog.data = data;
        this.printDialog.loading = false;
      });
    },
    close() {
      this.sheetId = null;
      this.printDialog.visible = false;
      this.$emit('closeDialog');
    },
    submit() {
      this.$Print(document.querySelector('.preMaterialList-detailTable'));
    },
    cancel() {
      this.close();
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .printDialog {
  table {
    page-break-inside: auto;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  th {
    white-space: nowrap;
  }
  thead {
    display: table-header-group;
  }
  tfoot {
    display: table-footer-group;
  }
  .avue-crud__menu {
    display: none;
  }
  .avue-form__menu {
    display: none;
  }
  .ruleRowForm {
    margin-bottom: 5px;
    .el-radio {
      margin-right: 10px;
    }
    .header-icon {
      margin-right: 10px;
    }
  }
  .preMaterialList-detailTable {
    .title {
      font-weight: bold;
    }
    // height: 600px;
    // overflow-y: auto;
  }
}
</style>
